Day24 六角 Off Canvas #3

簡單小語

沒想到OffCanvas練習了三篇，看到這個版覺得有趣，立馬又想寫一個，雖然有些效果不同但大部分應該是相同的吧(遲疑ing)，按鈕的轉換效果用了偽元素方式，不知道這樣算及格嗎？想了一想JQuery的點擊事件練習了好多，header的運用也要背起了哈哈，不過每次的練習真的都有發現不足的地方，觀念錯誤的地方，與預期輸出結果不同的地方，反覆修正練習，總會有些成果的吧，最常發現尺寸計算錯誤，樣式出來都破掉或怪怪的，繼續加油囉。

筆記分享

1. 這次的menu沒有包在wrap裡，不然點擊事件時移動怪怪的。
2. 在body中使用overflow-x:hidden，隱藏了水平的破版範圍。
3. 運用了兩個position:fixed，menu及btn，移動時訂在畫面中。
4. linear-gradient又出現了，看了配色網站就不怕顏色突兀了。
5. 小小btn做了許多效果，color, hover, :before, :after, .active:before, .active:after, transition。
6. li a利用選取器first-child選到第一個讓樣式與其他不同。
7. menu的border-bottom利用box-shadow製造一些陰影，帶點立體效果。
8. 點擊出現的灰色陰影，另外撰寫class=”background”，佔滿整個畫面，再利用z-index排列階層避免覆蓋。
9. “三”變”X”就是靠.active:before, .active:after更改樣式，做出差不多效果。
10. 移動利用transform:translateX()，點擊事件來移動，注意menu及wrap的位置。

刻意練習

Practice(200817 Day 24)

樣板來源

Off-Canvas Menu

2020 iT邦幫忙鐵人賽 Day24 網頁前端-刻意練習(Off Canvas #3)